<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智慧脑书</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <style>

    </style>
</head>
<body ng-app="xiongmaoApp" ng-controller="xiongmaoCtrl" ng-init="myOnInit()" ng-cloak class="ng-cloak">

<!--头部-->
<header>
    <div class="hd-line"></div>
    <div class="hd-container">
        <img src="img/logo.png">
        <nav>
            <a href="#" ng-click="toMyNaoshu()">脑书管理</a>
            <a href="#" ng-click="openPersonal()">个人中心</a>
            <a href="#" ng-click="exitUser()" ng-show="isLogined">注销</a>
        </nav>
    </div>
</header>
<!--头部结束-->

<div id="body-container" class="body-container">
    <div class="art-container">
        <!--左边导航栏-->
        <div class="nav-left">
            <a ng-click="initIndex()"><strong>首页</strong></a>
            <a ng-click="showMyNaoshu()"><strong>我的脑书</strong></a>
            <a ng-click="showStar()"><strong>我的收藏</strong></a>
            <a href="#" ng-click="toFollower()"><strong>我的粉丝</strong></a>
            <a href="#" ng-click="toFollow()"><strong>我的关注</strong></a>
        </div>

        <!--中间内容-->
        <article ng-hide="personalShow">
            <form role="form" ng-submit="naoshuSearch()" novalidate>
                <input type="text" placeholder="搜索脑书" class="form-control topInput" ng-model="searchContent">
            </form>

            <!--人名搜索-->
            <div class="userShow" ng-show="userSearchShow">
                <h5 ng-repeat="z in searchUser" ng-show="searchUser"><a href="#" ng-click="showUserNaoshu(z.userId)">{{z.name}}</a></h5>
                <h5 ng-hide="searchUser">未搜索到相关人员</h5>
            </div>

            <!--ng-cloak页面加载时防止闪烁-->
            <div class="myWell"  ng-repeat="x in showData" ng-show="naoshuShow" ng-cloak>
                <div class="row">
                    <div class="col-sm-2">
                        <img ng-src="{{x.imgPath}}" class="img-circle img-left">
                    </div>
                    <div class="col-sm-6">
                        <a ng-click="jumpTo(x.userId,x.ntId)"><h5><b>{{x.name}}/{{x.ntName}}</b></h5></a>
                        {{x.abstract}}
                    </div>
                    <div class="col-sm-4">
                        <span class="glyphicon glyphicon-star pull-right followBtn" title="关注" ng-click="follow(x.userId)"></span>
                        <img ng-src="{{x.png}}+'?'+{{x.ntId}}" class="pull-right img-right" ng-click="openBigPng($index)">

                        <!--图片模态框-->
                        <div class="modalPngContainer" ng-class="x.modalBackClass">
                            <div class="modalBack" ng-class="x.modalBackClass" ng-click="closeBigPng($index)">
                                <img id="img" ng-src="{{x.png}}+'?'+{{x.ntId}}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wellBottom row text-center">
                    <div class="col-sm-4" ng-click="star(x.ntId)" title="收藏"><span class="glyphicon glyphicon-heart-empty"></span></div>
                    <div class="col-sm-4" ng-click="openComment($index,x.ntId)" title="评论"><span class="glyphicon glyphicon-edit"></span>{{x.ctNum}}</div>
                    <div class="col-sm-4" ng-click="thumbsUp($index,x.ntId)" title="点赞"><span class="glyphicon glyphicon-thumbs-up" ng-class="x.thumbsUpClass"></span>{{x.thumbsUp}}</div>
                </div>
                <div class="comment" ng-show="x.commentShow">

                    <!--添加评论-->
                    <form class="bs-example bs-example-form" role="form" novalidate>
                        <div class="input-group">
                            <input type="text" class="form-control" ng-model="commentSubmitText.text" placeholder="说出你的想法">
                            <span class="input-group-btn">
                                <button ng-click="commentSubmit(x.ntId,$index)" class="btn btn-default">评论</button>
                            </span>
                        </div><!-- /input-group -->
                    </form>

                    <!--展示评论-->
                    <div ng-repeat="y in commentData" class="commentText">
                        <div class="pull-right" style="font-size: 12px;color: #888">{{y.ctTime}}</div>
                        <div style="font-size: 12px;color: #3A80C0"><b>{{y.ctName}}: </b></div>
                        <div style="font-size: 12px">{{y.ctText}}</div>
                    </div>
                </div>
            </div>

            <!--分页-->
            <div style="text-align: center" ng-show="naoshuShow">
                <ul class="pagination pagination-lg">
                    <li ng-click="firstPage()"><a href="#">&laquo;</a></li>
                    <li ng-repeat="z in dataPage" ng-class="z.class" ng-click="turnTo(z.page)"><a href="#">{{z.page}}</a></li>
                    <li ng-click="lastPage()"><a href="#">&raquo;</a></li>
                </ul>
            </div>
        </article>

        <!--个人中心-->
        <article class="myWell" ng-show="personalShow">
            <form class="bs-example bs-example-form" role="form">
                <fieldset>
                    <legend>修改资料</legend>
                    <div class="form-group">
                        <label for="name">用户名</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="name" ng-model="personalMsg.name" placeholder="输入昵称">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" ng-click="changeName()">修改</button>
                            </span>
                        </div><!-- /input-group -->
                    </div>
                    <div class="form-group">
                        <label for="oldPassword">初始密码</label>
                        <input type="password" class="form-control" id="oldPassword" ng-model="personalMsg.oldPassword" placeholder="输入原密码">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" ng-model="personalMsg.password" placeholder="输入密码">
                    </div>
                    <div class="form-group">
                        <label for="pwdAgain">确认密码</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="pwdAgain" ng-model="personalMsg.pwdAgain" placeholder="确认密码">
                            <span class="input-group-btn">
                        <button class="btn btn-default" type="button" ng-click="changePassword()">修改</button>
                    </span>
                        </div><!-- /input-group -->
                    </div>
                </fieldset>
            </form>
            <form action="php/uploadPng.php" method="post" enctype="multipart/form-data" role="form">
                <div class="form-group">
                    <label for="inputfile">新头像</label>
                    <input type="file" id="inputfile" name="file">
                    <p class="help-block">
                        只能上传png、jpg、gif、jpeg文件，且大小不能超过1M，文件名不能包含中文。
                    </p>
                    <button class="btn btn-default" type="submit">上传头像</button>
                </div>
            </form>
        </article>

        <!--用户栏-->
        <aside ng-cloak>
            <form ng-hide="isLogined" ng-submit="loginForm()" class="unlogined" role="form" novalidate>
                <h4>欢迎使用智慧脑图</h4>
                <div class="form-group">
                    <input type="text" class="form-control" ng-model="loginData.user" placeholder="请输入账号" required>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" ng-model="loginData.password" placeholder="请输入密码" required>
                    <div ng-show="alertShow" class="myAlert">
                        <span ng-click="alertShow = 0" class="myClose pull-right">X</span>
                        <span ng-show="serverFail">请求服务器失败，请重试</span>
                        <span ng-show="loginFail">用户名或密码错误</span>
                    </div>
                </div>
                <button type="submit" class="btn btn-default pull-left">登录</button>

                <a class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal">注册</a>
            </form>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <form class="modal-content" role="form" ng-submit="registerForm()" novalidate>
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                脑图注册
                            </h4>
                        </div>
                        <div class="modal-body">
                            <input type="text" class="form-control form-group" ng-model="registerData.user" placeholder="账号(1-6位数字)" required>
                            <input type="text" class="form-control form-group" ng-model="registerData.name" placeholder="昵称（长度不大于20）" required>
                            <input type="password" class="form-control form-group" ng-model="registerData.password" placeholder="密码（长度不大于6的数字）" required>
                            <div class="form-group">
                                <input type="password" class="form-control" ng-model="registerData.passwordAgain" placeholder="确认密码" required>
                                <div ng-show="registerAlertShow" class="myAlert">
                                    <span ng-click="registerAlertShow = 0" class="myClose pull-right">X</span>
                                    <span ng-show="registerServerFail">请求服务器失败，请重试</span>
                                    <span ng-show="registerFail">注册失败，{{registerError}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="submit" class="btn btn-primary">
                                立即注册
                            </button>
                        </div>
                    </form><!-- /.modal-content -->
                </div>
            </div><!-- /.modal -->

            <!--已登录-->
            <div ng-show="isLogined" class="logined">
                <img class="img-circle" ng-src="{{user.imgPath}}"><br>
                <h5 class="text-center"><strong>{{user.name}}</strong></h5>
                <div class="userInf container">
                    <div class="col-sm-4 text-center">
                        <strong>{{user.follow}}</strong>
                        <br>关注
                    </div>
                    <div class="col-sm-4 text-center">
                        <strong>{{user.follower}}</strong>
                        <br>粉丝
                    </div>
                    <div class="col-sm-4 text-center">
                        <strong>{{user.ntNum}}</strong>
                        <br>脑书
                    </div>
                </div>
            </div>
        </aside>
        <!--用户栏结束-->
    </div>
</div>
<footer>
    <div class="art-container">
        当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。 <a href="http://www.miitbeian.gov.cn/">渝ICP备17005970号-1</a>
        <a href="admin.html" style="color: #3A80C0">管理登录</a>
    </div>
</footer>

<!--提示弹窗-->
<div class="popupOutContainer" ng-show="myAlertShow">
    <div class="popupInContainer" ng-class="popupAnimate">
        <div class="popupTop"><img src="img/alertLogo.png"></div>
        <div class="popupArticle">{{alertMsg}}</div>
        <div class="popupBtn">
            <button class="btn btn-default" ng-click="closePopup()">确定</button>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<!--<script src="js/less.min.js"></script>-->
<script src="js/index.js"></script>
</body>
</html>